<template>
	<div class="tips">
		<h2>{{ title || $t($route.meta?.title||'') }}</h2>
		<slot></slot>
		<p v-if="showTips">{{ tips }}</p>
	</div>
</template>

<script setup lang="ts">

defineProps({
	tips: {
		type: String,
		default: ""
	},
	showTips: {
		type: Boolean,
		default: true
	},
	title: {
		type: String,
		default: ""
	}
});
</script>

<style scoped lang="scss">
.tips {
	padding: 10px 0 0 10px;
	h2 {
		font-size: 16px;
		color: #333;
		margin-bottom: 12px;
	}
	p {
		font-size: 12px;
		color: #c9cdd4;
		line-height: 36px;
	}
}
</style>
